<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="canvas" width="550" height="350" style="background-color: white;"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Parameters
        const centerX = 150;
        const centerY = 150;
        const radius = 80;
        const pointP_x = 420;
        const pointP_y = centerY;
        const x_measure_y = 260;

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            // Draw line
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.stroke();
            // Draw arrowhead
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fill();
        }

        // 1. Draw the sphere (circle)
        ctx.save();
        ctx.lineWidth = 2.5;
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.restore();

        // Set default line width for other elements
        ctx.lineWidth = 2;

        // 2. Draw the radius R
        ctx.font = 'italic bold 22px Arial';
        const r_angle = 135 * Math.PI / 180;
        const r_startX = centerX + radius * Math.cos(r_angle);
        const r_startY = centerY - radius * Math.sin(r_angle); // Use minus because canvas y-axis is inverted
        drawArrow(r_startX, r_startY, centerX, centerY);
        ctx.fillText('R', centerX - 45, centerY - 45);

        // 3. Draw the dashed lines
        ctx.save();
        ctx.setLineDash([7, 7]);
        ctx.lineWidth = 2;

        // Horizontal axis line
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(canvas.width - 50, centerY);
        ctx.stroke();

        // Vertical line from center to x measurement
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(centerX, x_measure_y);
        ctx.stroke();

        // Vertical line from P to x measurement
        ctx.beginPath();
        ctx.moveTo(pointP_x, pointP_y);
        ctx.lineTo(pointP_x, x_measure_y);
        ctx.stroke();

        ctx.restore();

        // 4. Draw point P
        ctx.beginPath();
        ctx.arc(pointP_x, pointP_y, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.save();
        ctx.textBaseline = 'bottom';
        ctx.fillText('P', pointP_x, pointP_y - 8);
        ctx.restore();

        // 5. Draw the distance x measurement line
        // Main line
        ctx.beginPath();
        ctx.moveTo(centerX, x_measure_y);
        ctx.lineTo(pointP_x, x_measure_y);
        ctx.stroke();

        // Left arrowhead
        const headLength = 10;
        ctx.beginPath();
        ctx.moveTo(centerX, x_measure_y);
        ctx.lineTo(centerX + headLength, x_measure_y - headLength / 2);
        ctx.lineTo(centerX + headLength, x_measure_y + headLength / 2);
        ctx.closePath();
        ctx.fill();

        // Right arrowhead
        ctx.beginPath();
        ctx.moveTo(pointP_x, x_measure_y);
        ctx.lineTo(pointP_x - headLength, x_measure_y - headLength / 2);
        ctx.lineTo(pointP_x - headLength, x_measure_y + headLength / 2);
        ctx.closePath();
        ctx.fill();

        // Label 'x'
        ctx.fillText('x', (centerX + pointP_x) / 2, x_measure_y + 25);

        // 6. Draw Figure caption
        ctx.font = 'bold 20px Arial';
        ctx.fillText('Fig. 7.1', canvas.width / 2, canvas.height - 30);
    </script>
</body>
</html>